<template>
  <van-popup v-model="showPopup" position="bottom" :overlay=false>
    <div id='popup-search' class="search-popup-wrapper" :style="{ overflow: 'scroll',  height: pageHeight + 'px'}">
      <section class="search-bar-content">
        <a href="javascript:;" @click="close" class="search-close">关闭</a>
        <div class="input-wrap">
          <input class="search-input" autofocus v-model="key" placeholder="输入搜索关键字" maxlength="30" />
        </div>
        <button type="submit" @click="searchAction" class="search-btn">搜索</button>
      </section>

      <div class="search-result-wrapper" style="margin-top: 2px" v-if="hasResult">
        <div class="tabs-wrapper">
          <ul class="tags-tab">
            <li @click="switchActive(0)" :class="['tag-item', activeIndex == 0 ? 'tag-selected' : '']">问题</li>
            <li @click="switchActive(1)" :class="['tag-item', activeIndex == 1 ? 'tag-selected' : '']">名师</li>
            <li @click="switchActive(2)" :class="['tag-item', activeIndex == 2 ? 'tag-selected' : '']">作品</li>
            <li @click="switchActive(3)" :class="['tag-item', activeIndex == 3 ? 'tag-selected' : '']">资讯</li>
          </ul>
        </div>

        <ul v-waterfall-lower="loadMoreData" waterfall-disabled="disabled" waterfall-offset="300" class="result-content" v-if="activeIndex == 0">
          <li class="question-info-item" v-for="(item, index) in dataList[activeIndex].results" @click="viewQuestionDetail(index)">
            <div class="question-header">
              <img class="avatar" :src="item.asker.avatar" alt="" />
              <span class="name">{{ item.asker.nickname }}</span>
              <span class="price">{{ item.reward }}</span>
            </div>
            <div class="question-content">
              <div :class="[ 'question-desc', item.attachments.length ? 'dianping-type' : '']">
                <p class="question-text">{{ item.text }}</p>
                <div class="question-tags">
                  <span v-if="item.catalog" class="tag-item">{{ item.catalog.name }}</span>
                </div>
              </div>
              <div v-if="item.attachments.length" class="question-painting">
                <img :src="item.attachments[0]" alt="">
              </div>
            </div>
          </li>
        </ul>

        <ul v-waterfall-lower="loadMoreData" waterfall-disabled="disabled" waterfall-offset="300" class="result-content" v-if="activeIndex == 1">
          <li v-for="(item, index) in dataList[activeIndex].results" class="master-info-item" @click="viewMasterDetail(index)">
            <div class="avatar-wrapper">
              <img class="avatar-image" alt="" :src="item.avatar" />
              <div class="level-wrapper">
                <p>{{ item.level.name[0] }}</p>
              </div>
            </div>
            <div class="info-wrapper">
              <div class="info-content">
                <p class="name">{{ item.nickname }}</p>
                <span class="info">{{ item.title }}</span>
                <p class="info"> {{ item.answer_count }}回答 &nbsp;&nbsp; {{ item.fans_count }}粉丝</p>
              </div>
            </div>
            <div class="info-button-wrapper">
              <div @click="askQuestion(index, $event)" class="action-btn btn-yellow">请教</div>
            </div>
          </li>
        </ul>

        <ul v-waterfall-lower="loadMoreData" waterfall-disabled="disabled" waterfall-offset="300" class="result-content" v-if="activeIndex == 2">
          <li v-for="(item, index) in dataList[activeIndex].results" @click="viewPaintingDetail(index)" class="painting-info-item">
            <div class="painting-header">
              <img class="avatar" :src="item.user.avatar" alt="" />
              <div class="info-wrapper">
                <p class="name">{{ item.user.nickname }}</p>
                <p class="title">{{ item.user.title }}</p>
              </div>
              <span class="more">...</span>
            </div>
            <p class="painting-desc">{{ item.text }}</p>
            <image-previewer :images="item.attachments"></image-previewer>
            <div class="painting-footer">
              <span class="painting-date">{{ item.dateStr }}</span>
              <div class="painting-action">
                <img v-if="item.is_favorite" src="../assets/icon/icon_star_selected.png" alt="" />
                <img v-else src="../assets/icon/icon_star.png" alt="" />
                <span>收藏 {{ item.favorite_count }}</span>
              </div>
              <div class="painting-action">
                <img v-if="item.is_like" src="../assets/icon/icon_like_selected.png" alt="" />
                <img v-else src="../assets/icon/icon_like.png" alt="" />
                <span>已赞 {{ item.like_count }}</span>
              </div>
            </div>
          </li>
        </ul>

        <ul v-waterfall-lower="loadMoreData" waterfall-disabled="disabled" waterfall-offset="300" class="result-content" v-if="activeIndex == 3">
          <li v-for="(item, index) in dataList[activeIndex].results" @click="viewNewsDetail(index)" class="news-item">
            <div :class="['news-title', item.cover? 'has-image': '']">
              <div class="news-content">
                <p class="title-text">{{ item.title }}</p>
                <div class="news-info">
                  <span class="time">{{ item.pastTimeStr }}</span>
                </div>
              </div>
            </div>
            <div class="news-image">
              <img :src="item.avatar" alt="">
            </div>
          </li>
        </ul>

      </div>

      <div class="search-bar-marker" v-else>
        <div class="tips-title">
          <span>大家都在搜</span>
        </div>
        <ul class="hotwords">
          <li @click="chooseMarker('书画')" class="item is_focus">书画</li>
          <li @click="chooseMarker('书法')" class="item">书法</li>
          <li @click="chooseMarker('有效书法提升')" class="item is_focus">有效书法提升</li>
          <li @click="chooseMarker('曹书')" class="item is_focus">草书</li>
          <li @click="chooseMarker('行书')" class="item">行书</li>
          <li @click="chooseMarker('隶书')" class="item is_focus">隶书</li>
        </ul>
      </div>
      
      <slot></slot>
    </div>
  </van-popup>
</template>

<script>

import Waterfall from '@/components/vant/waterfall'

export default {
  name: 'SearchPopup',
  props: {
    value: String,
    showPopup: Boolean,
  },
  data () {
    return {
      key: this.value,
      hasResult: false,
      dataList: [{ results: [] }, { results: [] }, {results: [] }, { results: [] }],
      activeIndex: 0,
      disabled: true,
      pageHeight: document.body.clientHeight
    }
  },
  directives: {
    WaterfallLower: Waterfall('lower')
  },
  watch: {
    showPopup: function(newValue) {
      if (newValue) {
        this.init()
      }
    },
  },
  methods: {
    init: function() {
      window.onresize = function() {
        document.getElementById('popup-search').style.height = document.body.clientHeight + 'px'
      }
    },
    searchAction: function() {
      this.dataList = [{ results: [] }, { results: [] }, {results: [] }, { results: [] }]
      this.search()
    },
    search: function (next=null) {
      // 搜索事件直接在组件里面处理
      // this.$emit('search', this.key)
      var url = ''
      var params = {
        'search': this.key,
      }
      if (next) {
        url = next
      } else {
        if (this.activeIndex == 0) {
          url = '/dianping/question/'
        } else if (this.activeIndex == 1) {
          url = '/users/'
          params.user_type = 2
        } else if (this.activeIndex == 2) {
          url = '/works/'
        } else {
          url = '/news/'
        }
      }
      var data = this.dataList[this.activeIndex]
      this.$toast.loading()
      var that = this
      // 调用登陆接口
      this.axios.get(url, { params: params })
      .then(function (res) {
        that.$toast.clear()
        that.hasResult = true
        console.log(res.data)
        if (res.status === 200) {
          data.count = res.data.count
          data.next = res.data.next
          data.previous = res.data.previous
          data.results = data.results.concat(res.data.results)
        }
        that.disabled = false
      })
      .catch(function (error) {
        that.$toast.clear()
        console.log(error)
      })
    },
    close: function () {
      this.hasResult = false
      this.key = ''
      this.$emit('close')
    },
    chooseMarker: function(marker) {
      this.key = marker
    },
    switchActive(index) {
      this.activeIndex = index
      let data = this.dataList[this.activeIndex]
      if (index == 0 && data.results.length) {
        return
      } else if (index == 1 && data.results.length) {
        return
      } else if (index == 2 && data.results.length) {
        return
      } else if (index == 3 && data.results.length) {
        return
      }
      this.search()
    },
    loadMoreData() {
      var that = this
      this.disabled = true
      var data = this.dataList[this.activeIndex]
      if (data.next) {
        this.search(data.next)
      }
    },
    viewQuestionDetail(index) {
      var question = this.dataList[this.activeIndex].results[index]
      var params = { question: question, id: question.id }
      this.$router.push({ name: 'questionDetail', params: params })
    },
    viewMasterDetail(index) {
      var master = this.dataList[this.activeIndex].results[index]
      this.$router.push({ name: 'masterDetail', params: { master: master, id: master.id }})
    },
    viewPaintingDetail(index) {
      var painting = this.dataList[this.activeIndex].results[index]
      this.$router.push({ name: 'paintingDetail', params: { painting: painting }})
    },
    viewNewsDetail(index) {
      var news = this.dataList[this.activeIndex].results[index]
      this.$router.push({ name: 'newsDetail', params: { news: news }})
    },
    askQuestion(index, event) {
      var master = this.dataList[this.activeIndex].results[index]
      this.$router.push({ name: 'questionRelease', params: { type: 2,  master: master }})
      event.cancelBubble = true
    },
  }
}

</script>

<style lang="scss" scoped>
  .van-popup {
    background-color: #EFEFEF;
  }
  .search-bar-content {
    max-width: 768px;
    margin: 0 auto;
    background: #fff;
    padding: .3rem 4rem .3rem 3rem;
    position: relative;
    .search-close {
      position: absolute;
      left: 0;
      top: 0;
      margin: 0 .5rem;
      width: 2.75rem;
      height: 2rem;
      line-height: 2rem;
      display: block;
      color: #999;
    }
    .input-wrap {
      border: 1px solid #ddd;
      border-radius: .7rem;
      height: 1.4rem;
      line-height: 1.4rem;
      position: relative;
      background: #efefef;
      input {
        width: 100%;
        height: 1rem;
        line-height: 1rem;
        font-size: .7rem;
        text-align: center;
        outline: none;
        box-shadow: none;
        -webkit-appearance: none;
        border: none;
      }
    }
    .search-btn {
      right: .4rem;
      position: absolute;
      top: .3rem;
      border-radius: .7rem;
      width: 3rem;
      height: 1.4rem;
      line-height: 1.4rem;
      font-size: .7rem;
      cursor: pointer;
      border: 1px solid #ea5a49;
      background-color: #ea5a49;
      color: #fff;
      box-sizing: content-box
    }
  }

  .search-bar-marker {
    background: #fff;
    margin-top: .75rem;
    height: 300px;
    .tips-title {
      height: 2rem;
      width: 100%;
      border-bottom: 1px solid #efefef;
      span {
        height: 2rem;
        font-size: .7rem;
        line-height: 2rem;
        color: #4a4a4a;
        margin-left: .5rem;
      }
    }
    .hotwords {
      padding: .5rem;
      max-height: 7.8rem;
      overflow: hidden;
      .item {
        box-sizing: border-box;
        display: inline-block;
        padding: .2rem;
        line-height: 1rem;
        font-size: .6rem;
        color: #aaa;
        border: 1px solid #aaa;
        margin: .25rem .25rem 0;
        border-radius: .225rem;
        background-color: #fff;
        cursor: pointer;
      }
      .is_focus {
        color: #ff6d62;
        border-color: #ff6d62;
      }
    }
  }

  .result-content {
    margin-top: 10px;
  }

</style>
